<template>
  <div class="page-rechargeRecord">
    <div v-show="recordList.length!=0" id="wrapper">
      <div id="scroller">
        <div v-for="(item,index) in recordList" v-bind:key="index" class="c-item">
          <div class="c-balance">
            <p>￥{{(item.depositAmount/100).toFixed(2)}}</p>
          </div>
          <div class="c-money">
            <div v-bind:class="{'red':item.state==4,'green':item.state==3,'grey':item.state==1}" >{{["","未支付","","支付成功","已关闭"][item.state]}}</div>
            <span>{{item.created_at}}</span>  
          </div>
        </div>
        <div v-if="loadMoreFlag" class="scroll-loader">上拉加载更多...</div>
      </div>
    </div>
    <div v-show="recordList.length==0" class="c-r-null">
      暂无充值记录
    </div>
  </div>
</template>

<script>
var AlloyTouch = require("alloytouch");
var Transform = require("css3transform");
var scrollHei = null;

import moment from "moment";

export default {
  name: "HelloWorld",
  data() {
    return {
      pageSize: 20,
      pageIndex: 1,
      loadMoreFlag: false,
      recordList: []
    };
  },
  created() {
    // 初始化数据
    // this.initData();
    var m = moment(1512292712000).format("YYYY年MM月DD日");
    console.log(m);
  },
  mounted() {
    var self = this,
      scroller = document.querySelector("#scroller"),
      scrollHei = document.querySelector("#scroller").clientHeight,
      hei = scrollHei > window.innerHeight ? window.innerHeight - scrollHei : 0;

    console.log(scrollHei);
    console.log(hei);

    Transform(scroller, true);

    var AT = new AlloyTouch({
      touch: "#wrapper", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          $(".scroll-loader").html("正在更新数据...");
        } else {
          $(".scroll-loader").html("上拉加载更多...");
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag) {
            self.loadMore(function() {
              self.$nextTick(function() {
                var scrollHei = document.querySelector("#scroller")
                  .clientHeight;
                var hei =
                  scrollHei > window.innerHeight
                    ? window.innerHeight - scrollHei - 70
                    : 0;
                AT.min = hei;
              });
            });
          }
        }
      }
    });

    // 加载更多
    self.loadMore(function() {
      self.$nextTick(function() {
        var scrollHei = document.querySelector("#scroller").clientHeight;
        var hei =
          scrollHei > window.innerHeight ? window.innerHeight - scrollHei : 0;
        AT.min = hei;
      });
    });
  },
  methods: {
    loadMore(callback) {
      var self = this;
      // 定义请求
      var req = this.Axios.get(this.Interface.host, {
        params: self.GetQuery({
          pageIndex: self.pageIndex,
          pageSize: self.pageSize
        })
      });

      // 请求数据
      req.then(res => {
        var data = res.data.data.me;
        if (data != null) {
          var result = data.depositRecords;
          var count = result.count;
          self.loadMoreFlag =
            count >= this.pageIndex * this.pageSize ? true : false;

          self.pageIndex = self.pageIndex + 1;

          var r = self.recordList;
          result.rows.forEach(item => {
            var o = {};
            o.depositAmount = item.depositAmount;
            o.state = item.state;
            var t = item.created_at * 1;
            o.created_at = moment(t).format("YYYY年MM月DD日");
            r.push(o);
          });

          this.recordList = r;

          if (callback) callback();
        }
      });
      // 请求接口失败
      req.catch(res => {
        this.Toast("服务器开小差了~");
      });
    },
    GetQuery({ pageIndex, pageSize }) {
      return {
        query: `{
                me {
                  id
                  depositRecords(pageIndex:${pageIndex},pageSize:${pageSize}){
                    count
                    rows{
                      amount
                      state
                      created_at
                      depositAmount
                    }
                  }
                }
              }`
      };
    }
  }
};
</script>


<style lang="less" scoped>
.page-rechargeRecord {
  position: relative;
  width: 100%;
  height: 100%;

  #wrapper {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;

    #scroller {
      position: absolute;
      z-index: 1;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      width: 100%;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
      -o-text-size-adjust: none;
      text-size-adjust: none;
    }

    .scroll-loader {
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }

  .c-item {
    height: 100px;
    border-bottom: 1px solid #ececec;
    color: #333;
    display: -webkit-box;
    box-sizing: border-box;
    padding: 15px 30px;
    font-size: 26px;
    .c-balance {
      -webkit-box-flex: 1;
      display: -webkit-box;
      text-align: left;
      -webkit-box-orient: vertical;
      -webkit-box-pack: center;
      -webkit-box-align: start;
      p {
        font-size: 32px;
      }
      span {
        color: #999;
      }
    }

    .c-money {
      -webkit-box-flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-box-pack: center;
      -webkit-box-align: end;
      color: #000;
      font-weight: 400;
      .red {
        // 未支付
        color: #ccc;
      }
      .green {
        // 支付成功
        color: #008972;
      }
      .grey {
        // 支付失败
        color: #efc028;
      }
      span {
        display: block;
        color: #999;
        margin: 10px 0 0 0;
      }
    }
  }

  .c-r-null {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    font-size: 28px;
    color: #999;
    text-align: center;
  }
}
</style>

